<template>
    <div class="two bodybg">

        <div class="head">
            <div class="nav_box justify-between">
                <div class="time_left"></div>
                <div class="title_m">大企业税源监控分析应用服务</div>
                <div class="yun_right"></div>
            </div>

            <div class="flex-row">
                <div class="minitit_l flex-row-r">
                    <a href="javascript:;" @click="go('/jsjfgkfxs')" class="minibtn bg01"><span>减税概况</span></a>
                    <a href="javascript:;" @click="go('/fpgks')" class="minibtn bg02 "><span>发票概况</span></a>
                    <a href="javascript:;" @click="go('/ones')" class="minibtn bg02 "><span>税收概况</span></a>
                </div>
                <div class="minitit_r flex-row">
                    <a href="javascript:;" @click="go('/twos')" class="minibtn bg03 ved"><span>经营概况</span></a>
                    <a href="javascript:;" @click="go('/threes')" class="minibtn bg03 "><span>行业概况</span></a>
                    <a href="javascript:;" @click="go('/fours')" class="minibtn bg04"><span>区域概况</span></a>
                </div>
            </div>
        </div>
        <div class="bkmail justify-between">
            <div class="bk_le">
                <!-- 集团概况 -->
                <div class="box_con1">
                    <div class="title"><span>企业经济概况</span></div>
                    <div class="conform flex-row" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                        <div class="waik50">
                            <div class="onebox_tit">
                                <h2>本年营业收入</h2>
                                <span><b>{{jtjjgk.YYSR?jtjjgk.YYSR:''}}</b>亿元</span>
                            </div>
                            <div id="echart1" style="  height: 140px;"></div>
                        </div>
                        <div class="waik50">
                            <div class="onebox_tit">
                                <h2>本年利润总额</h2>
                                <span><b>{{jtjjgk.LRZE?jtjjgk.LRZE:''}}</b>亿元</span>
                            </div>
                            <div id="echart2" style=" height: 140px;"></div>
                        </div>
                    </div>
                </div>
                <!-- 集团企业收入趋势 -->
                <div class="box_con1 zhux" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title"><span>企业营业收入趋势</span><a class="more">明细</a></div>
                    <div class="conform2">
                        <div id="echart3" style=" display: block; height: 220px;"></div>
                    </div>
                </div>
                <!-- 集团收入排名 -->
                <div class="box_con1" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title"><span>企业营业收入排名</span><a class="more">明细</a>
                    </div>
                    <ul class="conform3-list slist">
                    	<li><span>1</span>xxxxxxxg股份有限公司</li>
                    	<li><span>2</span>xxxxxxxg股份有限公司</li>
                    	<li><span>3</span>xxxxxxxg股份有限公司</li>
                    	<li><span>4</span>xxxxxxxg股份有限公司</li>
                    	<li><span>5</span>xxxxxxxg股份有限公司</li>
                    	<li><span>6</span>xxxxxxxg股份有限公司</li>
                    	<li><span>7</span>xxxxxxxg股份有限公司</li>
                    </ul>
                </div>

            </div>

            <div class="bk_min">
                <div class="top_shuju justify-between">
                    <!-- box1 -->
                    <div class="sjbk">
                        <div class="sj_tit"><img src="@/assets/styles/img/icon_l.png">{{form.jtlx=='11'?'集团':'企业'}}户数</div>
                        <div class="sjcon">{{jths.JTHS?jths.JTHS:'0'}}</div>
                    </div>
                    <!-- box2 -->
                    <div class="sjbk">
                        <div class="sj_tit"><img src="@/assets/styles/img/icon_l.png">成员企业户数</div>
                        <div class="sjcon">{{jths.CYQYHS?jths.CYQYHS:'0'}}</div>
                    </div>
                    <!-- box3 -->
                    <div class="sjbk">
                        <div class="sj_tit"><img src="@/assets/styles/img/icon_q.png">上年营业收入(万元)</div>
                        <div class="sjcon">{{jths.SNYYSR?jths.SNYYSR:'0'}}</div>
                    </div>
                    <!-- box4 -->
                    <div class="sjbk">
                        <div class="sj_tit"><img src="@/assets/styles/img/icon_q.png">上年利润总额(万元)</div>
                        <div class="sjcon">{{jths.SNLRZE?jths.SNLRZE:'0'}}</div>
                    </div>

                </div>
                <div class="mapbox">
                    <div class="title">河北省营业收入
                        <div class="mapse flex-row">
                            <div class="txtinp flex-row">
                                <span class="spansize">起止时间：</span>
                                <el-date-picker popper-class="sift-data" :append-to-body="false" class="inpcon" v-model="form.date" type="monthrange" range-separator="至" start-placeholder="起" end-placeholder="止" value-format="yyyy-MM" :default-value="form.defaultDate">
                                </el-date-picker>
                            </div>
                            <div class="txtinp flex-row">
                                <span class="spansize">企业类型：</span>
                                <el-select class="inpcon2" v-model="form.jtlx" placeholder="请选择" :popper-append-to-body="false">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <a href="javascript:;" class="ashw" id="gotosheng" @click="getData()">查询</a>
                        </div>
                    </div>
                    <div class="map_shuju">
                        <HeBeiMap />
                    </div>
                    <div class="chart" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                        <div class="biaoti">营业收入（万元）</div>
                        <div class="main" id="echart5">

                        </div>
                    </div>
                </div>

            </div>

            <div class="bk_le">
                <!-- 集团收入经济类型构成 -->
                <div class="box_con1 rightbg" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title_r"><span>企业营业收入经济类型构成</span><a class="more">明细</a></div>
                    <div class="conform">
                        <div id="echart-r1" style=" display: block; height: 200px;"></div>
                    </div>
                </div>
                <!-- 企业利润趋势况 -->
                <div class="box_con1 rightbg" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title_r"><span>企业利润趋势况</span><a class="more">明细</a></div>
                    <div class="conform">
                        <div class="conform">
                            <div id="echart-r2" style=" display: block; height: 200px;"></div>
                        </div>
                    </div>
                </div>
                <!-- 企业利润排名 -->
                <div class="box_con1 rightbg" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title_r"><span>企业利润排名</span><a class="more">明细</a></div>
                    <ul class="conform3-list slist">
                    	<li><span>1</span>xxxxxxxg股份有限公司</li>
                    	<li><span>2</span>xxxxxxxg股份有限公司</li>
                    	<li><span>3</span>xxxxxxxg股份有限公司</li>
                    	<li><span>4</span>xxxxxxxg股份有限公司</li>
                    	<li><span>5</span>xxxxxxxg股份有限公司</li>
                    	<li><span>6</span>xxxxxxxg股份有限公司</li>
                    	<li><span>7</span>xxxxxxxg股份有限公司</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 地图 -->
        <div id="map-dialog" class="map-dialog">
            <div class="d_main">
                <div class="m_list">
                    <div class="l_item">

                        <div class="d_mainbgc" style="height: 516px;overflow:hidden">
                            <div class="title">{{mapNsrmc}}</div>
                            <div style="height:470px;overflow-y:auto">
                            <table class="shiqutable" v-loading="maploading">
                                <tr v-for="(item,key) in mapXzData" :key="key">
                                    <td><span>{{item.SWJGMC}}:</span>{{item.YYSR}}万元</td>
                                </tr>

                            </table>
                            </div>
                        </div>
                        <div class="d_mainbgb"></div>

                    </div>

                </div>
                <a class="m_close" href="javascript:;" onclick="document.getElementById('map-dialog').style.display = 'none'"></a>
            </div>
        </div>
        <!-- 地图end -->
        <!-- 集团 -->
        <div id="zx-dialog" class="zx-dialog">
            <div class="d_main">
                <div class="d_mainbgc" style="height: 486px;overflow:hidden">
                    <div class="title">{{pmNsrmc}}</div>
                    <div style="height:470px;overflow-y:auto">
                        <table class="shiqutable" v-loading="pmloading">
                            <tr v-for="(item,key) in pmXzData" :key="key">
                                <td><span>{{item.NSRMC}}:</span>{{item.YYSR}}亿</td>
                            </tr>

                        </table>
                    </div>

                </div>
                <div class="d_mainbgb"></div>

                <a class="m_close" href="javascript:;" onclick="document.getElementById('zx-dialog').style.display = 'none'"></a>
            </div>
        </div>

        <div id="zx-dialog2" class="zx-dialog">
            <div class="d_main">
                <div class="d_mainbgc" style="height: 290px;">
                    <div class="title">敬业集团有限公司收入</div>
                    <table class="shiqutable">
                        <tr>
                            <td><span>总部钢铁:</span>2354亿</td>
                        </tr>
                        <tr>
                            <td><span>乌兰浩特钢铁:</span>764亿</td>
                        </tr>
                        <tr>
                            <td><span>英国钢铁:</span>324亿</td>
                        </tr>
                        <tr>
                            <td><span>广东敬业钢铁:</span>223亿</td>
                        </tr>
                        <tr>
                            <td><span>广东粤北钢铁:</span>143亿</td>
                        </tr>

                    </table>
                </div>
                <div class="d_mainbgb"></div>

                <a class="m_close" href="javascript:;" onclick="document.getElementById('zx-dialog2').style.display = 'none'"></a>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import HeBeiMap from "@/components/Map/HeBeiMap/index.vue"

const init = () => {

















    $(function () {
        $("#datepicker").datepicker();
        $("#selectmenu").selectmenu();
    })


    $(function () {
        $("#from,#to").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: "yy-mm",
            onClose: function (dateText, inst) {
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
            beforeShow: function (input, inst) {
                if ((datVal = $(this).val()).length > 0) {
                    year = datVal.substring(datVal.length - 4, datVal.length);
                    month = jQuery.inArray(datVal.substring(0, datVal.length - 5), $(this).datepicker('option', 'monthNames'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month));
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        });
        $("#from,#to").focus(function () {
            $(".ui-datepicker-calendar").hide();
            // $("#ui-datepicker-div").position({
            //     my: "center top",
            //     at: "center top",
            //     of: window,
            //     collision: "fit"
            // });
        });
    });
    $(function () {
        $("#selectmenu").selectmenu();
    })

}

import * as echarts from "echarts";
let china = require('./json/130000_full.json');
import 'echarts-gl'
import autofit from 'autofit.js'

import { queryJygk, jygkJtxz, jygkSwjgxz } from '@/api/cxtj/jygk'
export default {
    data() {
        return {
            loading: false,
            form: {
                date: [],
                qssj: '',
                jssj: '',
                jtlx: '11',
                defaultDate: []
            },
            options: [
                {
                    value: '11',
                    label: '千户集团'
                }, {
                    value: '2',
                    label: '省局列名'
                }, {
                    value: '3',
                    label: '市局列名'
                }
            ],
            btnOption: [
                {
                    label: '总部在冀',
                    flag: true
                },
                {
                    label: '不在冀',
                    flag: false
                }
            ],
            jths: {},
            jtjjgk: {},
            jtyysrpmData: [], //集团营业收入排名
            jtyysrpmZbzj: [], //集团营业收入排名总部在冀
            jtyysrpmZbbzj: [], //集团营业收入总部不在冀
            pmNsrmc: '',
            pmloading: false,
            pmXzData: [],
            listJtyysrqs: {},
            listJjlxgc: [],
            listJtgkDt: [],
            maploading: false,
            mapNsrmc: '',
            mapXzData: '',
            mapJlrqk: {},
            mapJtLrqs: {}
        }
    },
    mounted() {
        autofit.init({
            dh: 1080,
            dw: 1920,
            el: ".bodybg",
            resize: true
        })
        var currentDate = new Date();
        var year = currentDate.getFullYear(); // 获取当前年份
         var month = (currentDate.getMonth() + 1) > 9 ? currentDate.getMonth() + 1 : '0' + (currentDate.getMonth() + 1); // 获取当前月份（注意月份是从0开始，所以要加1）

        this.form.defaultDate = [year + '-01', year + '-' + month]
        this.form.date = [year + '-01', year + '-' + month]

        this.getData()
        // this.init()



    },

    unmounted() {
        autofit.init()
    },
    methods: {
        tabHandle(key) {
            console.log(key)
            // if(key ==='0'){
            //       this.btnOption[1].flag = !this.btnOption[1].flag
            // }else{
            //      this.btnOption[0].flag = !this.btnOption[0].flag
            // }
            this.btnOption[0].flag = !this.btnOption[0].flag
            this.btnOption[1].flag = !this.btnOption[1].flag
            if (key == '0') {
                this.jtyysrpmData = this.jtyysrpmZbzj.sort((a, b) => a.JTSR - b.JTSR)

            } else {
                this.jtyysrpmData = this.jtyysrpmZbbzj.sort((a, b) => a.JTSR - b.JTSR)
            }
            this.jtyysrpm()
        },
        getData() {
            this.loading = true
            let param = {
                qssj: this.form.date.length > 0 ? this.form.date[0] : this.form.defaultDate[0],
                jssj: this.form.date.length > 0 ? this.form.date[1] : this.form.defaultDate[1],
                jtlx: this.form.jtlx,
            }
            queryJygk(param).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    //集团概况
                    this.jtjjgk = res.data.mapJtjjgk
                    this.listJtyysrqs = res.data.listJtyysrqs
                    this.jtyysrpmData = res.data.listJtyysrpmZbzj.sort((a, b) => a.JTSR - b.JTSR)
                    this.jtyysrpmZbzj = res.data.listJtyysrpmZbzj
                    this.jtyysrpmZbbzj = res.data.listJtyysrpmZbbzj


                    this.jths = res.data.mapJtjjgkJths
                    this.mapJlrqk = res.data.mapJlrqk
                    this.mapJtLrqs = res.data.mapJtLrqs
                    this.listJjlxgc = res.data.listJjlxgc
                    this.listJtgkDt = res.data.listJtgkDt.sort((a, b) => a.YYSR - b.YYSR)
                    console.log(this.listJtgkDt)
                    this.init()
                }
            })
        },
        init() {
            this.bdyysr()
            this.bnlrze()
            this.jtyysrqs()
            //this.jtyysrpm()
            this.jtyysrjjlx()
            this.jtlrqsqk()
            this.jtjlrqk()
            this.yysr()
            // this.mapChart()

        },
        //本年营业收入
        bdyysr() {
            let myChart = echarts.init(document.getElementById('echart1'));
            let option;

            const gaugeData = [{
                value: this.jtjjgk.YYSRZZL, // 值
                name: '同期增长',
                title: {
                    offsetCenter: ['0%', '20%'],
                },
                detail: {
                    valueAnimation: false,
                    offsetCenter: ['0%', '-20%']
                }
            }];
            option = {
                series: [{
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0.8,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#1379FC' // 渐变起始颜色
                                },
                                {
                                    offset: 1,
                                    color: '#31C9F8' // 渐变结束颜色
                                },
                                ],
                            },
                            borderRadius: 6,

                        },

                    },
                    axisLine: {
                        lineStyle: {
                            width: 8,
                            color: [
                                [1, '#465573'],
                            ]
                        }
                    },

                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 8

                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 8
                    },

                    data: gaugeData,
                    title: {
                        fontSize: 14,
                        color: '#ffffff',
                    },
                    detail: {
                        width: 60,
                        height: 24,
                        fontSize: 20,
                        color: '#ffffff',
                        borderWidth: 0,
                        formatter: '{value}%'
                    }
                }]
            };

            option && myChart.setOption(option);



        },
        //本年利润总额
        bnlrze() {

            let myChart = echarts.init(document.getElementById('echart2'));
            let option;

            const gaugeData = [{
                value: this.jtjjgk.LRZEZZL,
                name: '同期增长',
                title: {
                    offsetCenter: ['0%', '20%'],
                },
                detail: {
                    valueAnimation: false,
                    offsetCenter: ['0%', '-20%']
                }
            }];
            option = {
                series: [{
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                            color: {
                                type: 'linear', // 设置渐变类型为径向渐变
                                x: 0.8,
                                y: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#009286' // 渐变起始颜色
                                },
                                {
                                    offset: 1,
                                    color: '#1CDDCD' // 渐变结束颜色
                                },
                                ],
                            },
                            borderRadius: 6,

                        },

                    },
                    axisLine: {
                        lineStyle: {
                            width: 8,
                            color: [
                                [1, '#465573'],
                            ]
                        }
                    },

                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 8

                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 8
                    },

                    data: gaugeData,
                    title: {
                        fontSize: 14,
                        color: '#ffffff',
                    },
                    detail: {
                        width: 60,
                        height: 24,
                        fontSize: 20,
                        color: '#ffffff',
                        borderWidth: 0,
                        formatter: '{value}%'
                    }
                }]

            };

            option && myChart.setOption(option);


        },
        //集团营业收入趋势
        jtyysrqs() {

            let series0Data = [this.listJtyysrqs[0].YJD, this.listJtyysrqs[0].EJD, this.listJtyysrqs[0].SJD, this.listJtyysrqs[0].SIJD]
            let series1Data = [this.listJtyysrqs[0].YJDZZL, this.listJtyysrqs[0].EJDZZL, this.listJtyysrqs[0].SJDZZL, this.listJtyysrqs[0].SIJDZZL]


            let myChart = echarts.init(document.getElementById('echart3'));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffffff'
                        }
                    },
                    formatter: function (params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function (item) {
                            if (item.seriesType === 'bar') {
                                result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                            } else if (item.seriesType === 'line') {
                                result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                            }
                        });
                        return result;
                    }
                },
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '17%',
                    left: '8%',
                    right: '3%',
                    bottom: '0%',
                    containLabel: true
                },
                legend: {
                    data: ['营业收入', '同期增长率', '营业占比'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },
                xAxis: [{
                    type: 'category',
                    data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                    axisPointer: {
                        type: 'shadow',
                    },

                }],
                yAxis: [{
                    type: 'value',
                    name: '单位：亿元',

                    axisLabel: {
                        formatter: '{value}'
                    }

                },
                {
                    type: 'value',
                    name: '单位：%',

                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#324065', // 设置背景线的颜色
                        }
                    }
                }

                ],
                series: [{

                    name: '营业收入',
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#1379FC' // 渐变起始颜色
                            },
                            {
                                offset: 1,
                                color: '#31C9F8' // 渐变结束颜色
                            },

                            ],
                        },
                        borderRadius: [30, 30, 0, 0],

                    },
                    data: series0Data

                },
                {
                    name: '同期增长率',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#44D7B6' // 渐变起始颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: series1Data
                },
                {
                    name: '营业收入',
                    type: 'line',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: series1Data
                }
                ]
            });


        },
        // 集团营业收入排名
        jtyysrpm() {
            let self = this
            let yAxisData = []
            let series0Data = []
            for (let i = 0; i < this.jtyysrpmData.length; i++) {
                yAxisData.push(this.jtyysrpmData[i].SSJTNAME)
                series0Data.push(this.jtyysrpmData[i].JTSR)
            }
            var myChart = echarts.init(document.getElementById('echart4'));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var res = params[0].name + '<br/>';
                        for (var i = 0, l = params.length; i < l; i++) {
                            res += params[i].seriesName + ' : ' + params[i].value + ' 亿元<br/>';
                        }
                        return res;
                    }
                },
                textStyle: {
                    color: '#ffffff', // 文字颜色
                },
                grid: {
                    top: '12%',
                    left: '0%',
                    right: '0%',
                    bottom: '-3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线  
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: false // 
                    }
                },
                yAxis: {
                    name: '单位：亿元',
                    nameTextStyle: {
                        padding: [0, 0, 0, 780]
                    },

                    data: yAxisData,
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: true,
                        inside: true,
                        interval: 0, //横轴信息全部显
                        splitNumber: 30,
                        textStyle: {
                            color: '#ffffff',
                            verticalAlign: 'bottom',
                            fontSize: 14,
                            align: 'left',
                            padding: [0, 0, 10, -5]
                        }
                    }
                },
                series: [{
                    name: '收入',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 10, // 条形的宽度  
                    textStyle: {
                        color: '#ffffff', // 文字颜色
                    },
                    label: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            color: '#ffffff', // 文字颜色
                        },
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                            offset: 0,
                            color: '#72DEFF'
                        },
                        {
                            offset: 1,
                            color: '#0C68FC'
                        }
                        ]),
                        borderRadius: [10],
                    },

                    data: series0Data,

                }],

            });
            myChart.on('click', function (params) {
                let param = {
                    ssjtName: params.name,
                    qssj: self.form.date.length > 0 ? self.form.date[0] : self.form.defaultDate[0],
                    jssj: self.form.date.length > 0 ? self.form.date[1] : self.form.defaultDate[1],
                    jtlx: self.form.jtlx,
                }
                self.pmNsrmc = params.name
                document.getElementById('zx-dialog').style.display = 'flex'
                jygkJtxz(param).then(res => {
                    self.pmloading = false
                    if (res.code == 200) {
                        self.pmXzData = res.data

                    }
                })



            });

        },
        //集团营业收入经济类型构成
        jtyysrjjlx() {
            let self = this
            let newData = this.listJjlxgc.map(item => {
                return {
                    value: item.ZB,
                    name: item.DJZCLXMC
                }
            })
            let myChart = echarts.init(document.getElementById('echart-r1'));
          myChart.setOption({
          	color: ["#00BFD8", "#2196F3", "#FFC700", "#FF5722", "#8BC34A", "#9C27B0"],
          	
          
          	
			legend: {
			    top: '6%',
			    left: 'center',
			    textStyle: {
			        color: '#ffffff'
			    }
			},
          	series: [
          		// 第一个环图（2023年）
          		{
          			name: '地方/中央',
          			type: 'pie',
          			radius: ['42%', '56%'],
          			center: ['50%', '68%'],
          			startAngle: 25,
          			data: [{
          					value: 42.86,
          					name: '国有企业'
          				},
          				{
          					value: 35.71,
          					name: '外资企业'
          				},
          				{
          					value: 35.71,
          					name: '民营企业'
          				}
          			],
          			itemStyle: {
          				borderRadius: 5,
          				borderColor: '#1E2D4C',
          				borderWidth: 2
          			},
          			label: {
          				show: true,
          				formatter: function(params) {
          					// 换行显示：名称在上，百分比在下
          					return '{b|' + params.name + '}\n{d|' + params.percent + '%}';
          				},
          				rich: {
          					b: {
          						color: '#FFFFFF',
          						fontSize: 12,
          						padding: [0, 0, 2, 0], // 名称下间距调整为2
          						display: 'block',
          						align: 'center' // 添加居中对齐
          					},
          					d: {
          						color: '#FFC700',
          						fontSize: 12,
          						fontWeight: 'bold',
          						display: 'block',
          						align: 'center' // 添加居中对齐
          					}
          				},
          				position: 'outside',
          				alignTo: 'none',
          				minMargin: 5,
          				edgeDistance: 5,
          
          			},
          			labelLine: {
          				length: 13,
          				length2: 6,
          				maxSurfaceAngle: 80
          			},
          			emphasis: {
          				scale: true,
          				scaleSize: 5
          			},
          			emphasis: {
          				itemStyle: {
          					shadowBlur: 10,
          					shadowOffsetX: 0,
          					shadowColor: 'rgba(0, 0, 0, 0.5)'
          				}
          			}
          		},
          
          		// 第一个环图的中心总额（2023年）
          		{
          			type: 'pie',
          			radius: ['0%', '0%'],
          			center: ['50%', '68%'],
          			label: {
          				normal: {
          					position: 'center',
          					formatter: '总额\n100亿元', // 修改这里的数值为实际总额
          					textStyle: {
          						color: '#FFFFFF',
          						fontSize: 14,
          						fontWeight: 'bold'
          					}
          				}
          			},
          			data: [0]
          		},
          	]
          });


        },
        // 集团利润趋势情况
        jtlrqsqk() {
            let series0Data = [this.mapJtLrqs.YJD, this.mapJtLrqs.EJD, this.mapJtLrqs.SJD, this.mapJtLrqs.SIJD]
            let series1Data = [this.mapJtLrqs.YJDZZL, this.mapJtLrqs.EJDZZL, this.mapJtLrqs.SJDZZL, this.mapJtLrqs.SIJDZZL]
            let myChart = echarts.init(document.getElementById('echart-r2'));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffffff'
                        }
                    },
                    formatter: function (params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function (item) {
                            if (item.seriesType === 'bar') {
                                result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                            } else if (item.seriesType === 'line') {
                                result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                            }
                        });
                        return result;
                    }
                },
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '17%',
                    left: '0%',
                    right: '3%',
                    bottom: '0%',
                    containLabel: true
                },
                legend: {
                    data: ['利润总额', '同期增长率'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },
                xAxis: [{
                    type: 'category',
                    data: ['第一季度', '第二季度', '第三季度'],
                    axisPointer: {
                        type: 'shadow',
                    },

                }],
                yAxis: [{
                    type: 'value',
                    name: '单位：亿元',

                    axisLabel: {
                        formatter: '{value}'
                    }

                },
                {
                    type: 'value',
                    name: '单位：%',

                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#324065', // 设置背景线的颜色
                        }
                    }
                }

                ],
                series: [{

                    name: '利润总额',
                    type: 'bar',
                    barWidth: '24%',
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#009286' // 渐变起始颜色
                            },
                            {
                                offset: 1,
                                color: '#1CDDCD' // 渐变结束颜色
                            },

                            ],
                        },
                        borderRadius: [20, 20, 0, 0],

                    },
                    data: series0Data

                },


                {
                    name: '同期增长率',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#FFCE48' // 渐变起始颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: series1Data
                }
                ]
            });


        },

        // 集团净利润情况
        jtjlrqk() {
            let series0Data = [this.mapJlrqk.YJD, this.mapJlrqk.EJD, this.mapJlrqk.SJD, this.mapJlrqk.SIJD]
            let series1Data = [this.mapJlrqk.YJDZZL, this.mapJlrqk.EJDZZL, this.mapJlrqk.SJDZZL, this.mapJlrqk.SIJDZZL]
            let myChart = echarts.init(document.getElementById('echart-r3'));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffffff'
                        }
                    },
                    formatter: function (params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function (item) {
                            if (item.seriesType === 'bar') {
                                result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                            } else if (item.seriesType === 'line') {
                                result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                            }
                        });
                        return result;
                    }
                },
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '17%',
                    left: '0%',
                    right: '3%',
                    bottom: '0%',
                    containLabel: true
                },
                legend: {
                    data: ['利润总额', '同期增长率'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },
                xAxis: [{
                    type: 'category',
                    data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                    axisPointer: {
                        type: 'shadow',
                    },

                }],
                yAxis: [{
                    type: 'value',
                    name: '单位：亿元',

                    axisLabel: {
                        formatter: '{value}'
                    }

                },
                {
                    type: 'value',
                    name: '单位：%',

                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#324065', // 设置背景线的颜色
                        }
                    }
                }

                ],
                series: [{

                    name: '利润总额',
                    type: 'bar',
                    barWidth: '24%',
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#FCB00C' // 渐变起始颜色
                            },
                            {
                                offset: 1,
                                color: '#FCE89C' // 渐变结束颜色
                            },

                            ],
                        },
                        borderRadius: [30, 30, 0, 0],

                    },
                    data: series0Data

                },


                {
                    name: '同期增长率',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#37C6FF' // 渐变起始颜色
                            },

                            ],
                        },
                        borderRadius: [30, 30, 0, 0],

                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: series1Data
                }
                ]
            });


        },
        //营业收入
        yysr() {
            // qssrData
            let yAxisData = []
            let seriesData = []
            this.listJtgkDt.forEach(item => {
                yAxisData.push(item.SWJGMC)
                seriesData.push(item.YYSR)
            })
            console.log('yAxisData', yAxisData)
            console.log('seriesData', seriesData)
            let myChart = echarts.init(document.getElementById('echart5'));
            myChart.setOption({
                /*
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                */
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '0%',
                    left: '29%',
                    right: '35%',
                    bottom: '0%',
                    // containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0.9, 0.04],
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线  
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: false // 
                    }
                },
                yAxis: {
                    // name: '单位：亿元',
                    // nameTextStyle: {
                    //   padding: [0, 0, 0, 780]
                    // },
                    type: 'category',
                    data: yAxisData,
                    // ['张家口市', '邢台市', '承德市', '衡水市', '秦皇岛市', '廊坊市', '沧州市', '保定市', '邯郸市', '唐山市', '石家庄市'],
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: true,
                        inside: true,
                        //interval: 40, //横轴信息全部显
                        //splitNumber: 30,
                        textStyle: {
                            color: '#ffffff',
                            // verticalAlign: 'bottom',
                            fontWeight: "bold",
                            fontSize: 16,
                            align: 'right',
                            padding: [0, 0, 0, 0]
                        }
                    }
                },
                series: [{
                    name: '数值',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 16, // 条形的宽度  

                    label: {
                        show: true,
                        position: 'right',
                        fontSize: 16,
                        color: "#fff",
                        padding: 10
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                            offset: 0,
                            color: '#72DEFF'
                        },
                        {
                            offset: 1,
                            color: '#0C68FC'
                        }
                        ]),
                        borderRadius: [0, 10, 10, 0],
                    },
                    cursor: "default",
                    data: seriesData
                }],
            });

        },
        mapChart() {
            let self = this
            echarts.registerMap('china', china);
            let chart = echarts.init(document.getElementById('map'));
            var data = [{
                name: '唐山市',
                value: 10
            },
            {
                name: '张家口市',
                value: 20
            },
                // ... 其他省份
            ];
            chart.setOption({
                series: [{
                    type: 'map3D',
                    map: 'china',
                    top: '-30%', // 顶部的空间大小
                    bottom: '-8%', // 底部的空间大小
                    left: '-40%', // 左侧的空间大小
                    right: '-30%', // 右侧的空间大小
                    itemStyle: {
                        color: 'rgba(21, 46, 171, 0.5)',
                        opacity: 1, // 图形的不透明度 [ default: 1 ]
                        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                        borderColor: "#9AB4FF", // 图形描边的颜色。[ default: #333 ]
                    },

                    label: {
                        // 标签的相关设置
                        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                        // formatter: function (params) {
                        //   return params.name ? params.name : " ";
                        // },
                        position: "bottom",
                        textStyle: {
                            // 标签的字体样式
                            color: "#fff", // 地图初始化区域字体颜色
                            fontSize: 12, // 字体大小
                            opacity: 1,
                        },
                    },

                    /*
                    emphasis: {
                      // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                      label: {
                        // label 高亮时的配置
                        show: true,
                        textStyle: {
                          color: "#fff", // 高亮时标签颜色变为 白色
                          fontSize: 15, // 高亮时标签字体 变大
                        },
                      },
                      itemStyle: {
                        // itemStyle 高亮时的配置
                        areaColor: "#66ffff", // 高亮时地图板块颜色改变
                      },
                    },
                    */
                    groundPlane: {
                        // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                        show: false, // 是否显示地面。[ default: false ]
                        color: "#aaa", // 地面颜色。[ default: '#aaa' ]
                    },
                    light: {
                        // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                        main: {
                            // 场景主光源的设置，在 globe 组件中就是太阳光。
                            color: "#3D94CE", // 主光源的颜色。[ default: #fff ]
                            intensity: 2, // 主光源的强度。[ default: 1 ]
                            shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                            shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                            alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                            beta: 80, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                        },
                        ambient: {
                            // 全局的环境光设置。
                            color: "#fff", // 环境光的颜色。[ default: #fff ]
                            intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                        },
                    },

                    viewControl: {
                        // 用于鼠标的旋转，缩放等视角控制。
                        projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                        autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                        autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                        autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                        rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                        zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                        panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                        panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        distance: 160, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        minDistance: 30, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                        alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: -3, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                }]
            });
            chart.off('click');
            chart.on("click", (e) => {
                console.log(e)
                self.mapXzData = []
                if (self.listJtgkDt.length > 0) {
                    let swjgdm = ''
                    for (let i = 0; i < self.listJtgkDt.length; i++) {
                        if (e.data.name == self.listJtgkDt[i].SWJGMC) {
                            swjgdm = self.listJtgkDt[i].SWJGDM
                        }
                    }
                    let param = {
                        swjgDm: swjgdm,
                        qssj: self.form.date.length > 0 ? self.form.date[0] : self.form.defaultDate[0],
                        jssj: self.form.date.length > 0 ? self.form.date[1] : self.form.defaultDate[1],
                        jtlx: self.form.jtlx,
                    }
                    self.maploading = true
                    self.mapNsrmc = e.data.name
                    jygkSwjgxz(param).then(res => {
                        self.maploading = false
                        if (res.code == 200) {
                            console.log(res)
                            self.mapXzData = res.data
                        }
                    })
                    console.log(swjgdm)
                    let dialog = document.getElementById('map-dialog')
                    dialog.style.display = 'flex'
                }

            })
        },
        go(name) {
            this.$router.push(name)
        },

    },
    components: { HeBeiMap }
}
</script>


<style lang="scss" scoped>
@import '~@/assets/styles/css/common.css';
@import '~@/assets/styles/css/index.css';
@import '~@/assets/styles/css/jquery-ui.css';
::v-deep {
    .el-range-input {
        color: #fff;
    }
    .el-input__inner {
        border: none;
        color: #fff;
        background: transparent;
    }

    .el-select-dropdown {
        background-color: #1f3680;
        border: 1px solid #1f92ff !important;
        border-radius: 3px;
    }

    // border: 1px solid #003eff;
    // background: #007fff;
    // font-weight: normal;
    .el-select-dropdown__item {
        color: #fff;
        &.selected {
            color: #003eff;
        }
        &.hover {
            background: #007fff;
        }
    }

    .el-picker-panel {
        background-color: #1f3680;
    }
    .el-month-table td.in-range div,
    .el-month-table td.in-range div:hover {
        background-color: #007fff;
        color: #fff;
    }
    //     .el-month-table td.end-date div, .el-month-table td.start-date div {
    //       color:#007fff;
    // }
    .el-date-table td.in-range div,
    .el-date-table td.in-range div:hover,
    .el-date-table.is-week-mode .el-date-table__row.current div,
    .el-date-table.is-week-mode .el-date-table__row:hover div {
        background-color: #007fff;
        color: #fff;
    }
    .el-date-table th,
    .el-picker-panel__icon-btn {
        color: #fff;
    }
    .el-date-table td.today span {
        color: #003eff;
    }
    .el-month-table td .cell {
        color: #fff;
    }
    .el-month-table td.today .cell {
        color: #003eff;
    }
    .el-date-range-picker__header div {
        color: #fff;
    }
    .el-popper[x-placement^='bottom'] .popper__arrow {
        border-bottom-color: #1f3680;
        &::after {
            border-bottom-color: #1f3680;
        }
    }
}
</style>